<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar :leftText="title" autoBack>
			</u-navbar>
		</view>

		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		<view class="con-body">
			<view>
				<u-swiper :list="banner" keyName="image" radius="0" circular height="200" showTitle>
				</u-swiper>
			</view>
			<view class="main-service">
				<text style="margin-right:40rpx;" :class="current==0 ? 'title' : ''" @click="changetype(0)">邻里闲置</text>
				<text :class="current==1 ? 'title' : ''" @click="changetype(1)">物业直销</text>
			</view>
			<view class="u-demo-block__content" style="background-color: #FFFFFF;" v-if="current==0">
				<view class="album" v-for="(item, index) in releases" :key="index" style="border-bottom: 1rpx solid #ddd;">
					<view class="album__avatar">
						<u-avatar :src="item.avatar" mode="circle">
						</u-avatar>
					</view>


					<view class="album__content">	
						<view v-if="item.status == 1"
							style="float: right; height: 0rpx; position:relative;top: 10rpx;right: 20rpx;">
							<u-image width="100rpx" height="100rpx" src="https://resourse.cnlhjt.com/upload/20220825/ea67c8c95f615ffa9e2f4d3d81fc4316.png">
							</u-image>
						</view>
						<text style="font-size: 34rpx;font-weight: bold;color:#3e3e3e;">{{item.username}}</text>
						<view class="dis_inl_blo" style="margin-left:20rpx;">
							<u-icon v-if="item.contact_type == 1" name="weixin-circle-fill" @click="copy(item.contact)" color="#05CD65" size="17"></u-icon>
							<u-icon v-if="item.contact_type == 2" name="phone-fill" color="#0B898E" @click="call(item.contact)" size="18"></u-icon>
						</view>		
						<u-text margin="0 0 8rpx 0" color="#999999" size="14" :text="'来自 ' + item.from"></u-text>
						<text style="color: #0B898E; font-size: 28rpx;">{{item.theme}}</text>
						<text style="color: #333333;font-size: 30rpx;margin-left: 10rpx;"> {{item.content}}</text>
						
						<view style="margin-top: 20rpx; margin-bottom: 10rpx;">
							<u-album :urls="item.images" multipleSize="70" space="4"></u-album>
						</view>

						<view>
							<text style="color: #666666; font-size: 26rpx; float: left;">{{item.time}}</text>

							<view style="margin-right: 10rpx; float: right; display: inline;">
								<u-icon @click="intoComment(item)" name="chat-fill" size="18" label-size="26rpx"
									color="#00aa00" :label="item.comment + '评论'"></u-icon>
							</view>
							<view style="margin-right: 10rpx; float: right; display: inline;">
								<u-icon name="heart" size="18" color="#ff0000" label-size="26rpx"
									:label="item.like + '赞'" @click="like(item.id, index)"></u-icon>
							</view>
							<view style="margin-right: 10rpx; float: right; display: inline;">
								<u-icon name="eye" size="18" color="#0055ff" label-size="26rpx"
									:label="item.see + '浏览'"></u-icon>
							</view>

						</view>
					</view>
					<view class="u-m-l-10 u-p-10" v-if="item.contact_type == 2">
						<!-- <u-icon name="phone" color="#0B898E" @click="call(item.contact)" label="拨号" labelSize="24rpx" labelColor="#0B898E" size="20"></u-icon> -->
						
						<u-text :text="'￥' + item.price" color="red" size="16"></u-text>
					</view>
					<view class="u-m-l-10 u-p-10" v-if="item.contact_type == 1">
						<!-- <u-icon name="weixin-circle-fill" @click="copy(item.contact)" color="#0B898E" label="复制" labelSize="24rpx" labelColor="#0B898E" size="20"></u-icon> -->
						
						<u-text :text="'￥' + item.price" color="red" size="16"></u-text>
					</view>
					<view class="u-m-l-10 u-p-10" v-if="item.contact_type == 0">
						<u-text :text="'￥' + item.price" color="red" size="16"></u-text>
					</view>
				</view>
				
			</view>
			<view class="uni-flex-center" style="clear: both;margin-bottom: 20rpx;" v-if="current == 1">
				<view style="width:94%;padding-left:3%;">
					<u-grid :border="false" col="2">
						<u-grid-item v-for="(item,index) in releases" :key="index"
							:customStyle="{width: '46%', marginLeft: '2%', marginRight:'2%',marginBottom:'20rpx'}">
							<view class="main-service" style="min-width: 96%;padding:0;box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);overflow: hidden; border-radius: 20rpx;"
								@click="goodDetail(item.id)">
								<u-image :src="item.images[0]" :lazy-load="true" width="100%" height="300rpx" mode="scaleToFill"></u-image>
									<view v-if="item.status == 1"
										style="float: right; height: 0rpx; position:relative;top: 10rpx;right: 20rpx;">
										<u-image width="100rpx" height="100rpx" src="https://resourse.cnlhjt.com/upload/20220825/ea67c8c95f615ffa9e2f4d3d81fc4316.png">
										</u-image>
									</view>
								<view style="padding: 10rpx 10rpx;">
									<view style="margin-top: 10rpx;">
										<text class="overflow" style="font-size: 30rpx;">{{item.content}}</text>
									</view>
									<view style="margin-top: 3rpx;">
										<view class="u-flex u-row-between">
											<text class="u-line-1"
												style="color:#E35719; font-size: 22rpx;">{{item.theme}}</text>
											<text style="font-size: 32rpx;color:#f00;font-weight: bold;">￥{{item.price}}</text>
										</view>
									</view>
									<view class="u-flex u-row-between" style="margin-top:15rpx;">
										<view class="album__avatar">
											<u-avatar :src="item.avatar" size="30" mode="circle">
											</u-avatar>
										</view>
										<view style="width:85%;">
											<u-text text="物业直销" color="#3e3e3e" bold size="13"></u-text>
											<text class="overflow" style="font-size: 24rpx;margin-right:4rpx;color: #999;">{{item.from}}</text>
											
										</view>
									</view>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
				
			</view>
			<u-loadmore :status="status" @loadmore="moreDynamic" />
			<u-toast ref="uToast"></u-toast>
			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getLattice,
		likeDynamic,
		getShareLatticeGoods
	} from "@/service/shareService.js";
	export default {
		data() {
			return {
				status: 'loadmore',
				banner: '',
				title: '',
				releases: [],
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#0B868E',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
						iconPath: 'https://resourse.cnlhjt.com/upload/20220825/297a6c922f01bffbf8003dcd71876a3e.png',
						selectedIconPath: 'https://resourse.cnlhjt.com/upload/20220825/297a6c922f01bffbf8003dcd71876a3e.png',
						text: '发布',
						active: false
					},
					{
						iconPath: 'https://resourse.cnlhjt.com/upload/20220826/fe1324e9f480c358b1201642eed20eff.png',
						selectedIconPath: 'https://resourse.cnlhjt.com/upload/20220826/fe1324e9f480c358b1201642eed20eff.png',
						text: '首页',
						active: false
					},
					{
						iconPath: 'https://resourse.cnlhjt.com/upload/20220825/9745420910da6baf1946a0e7c3c069b1.png',
						selectedIconPath: 'https://resourse.cnlhjt.com/upload/20220825/9745420910da6baf1946a0e7c3c069b1.png',
						text: '我的发布',
						active: false
					}
				],
				current: 0,
				tid: 0,
				page: 1,
				limit: 10,
				showEmpty: false,
				reFresh: "",
			}
		},
		watch:{
			//监听reFresh,如果有修改就执行监听器
				reFresh: function() {
					this.releases=[];
			        //调接口刷新数据
					getLattice({
						tid: this.tid,
						page: this.page1,
						limit: this.limit1
					}).then(this.getLattice);
				}
		},
		onReachBottom() {
			if (this.status == 'nomore') return;
			this.status = 'loading';
			this.page = ++this.page;
			
			if (this.current == 0) {
				getLattice({
					tid: this.tid,
					page: this.page,
					limit: this.limit
				}).then(this.getLattice);
			} else {
				getShareLatticeGoods({
					tid:this.tid,
					page: this.page,
					limit: this.limit
				}).then(this.getLattice);
			}
		},
		onLoad(options) {
			let item = JSON.parse(options.item);
			this.title = item.name;
			this.banner = [{
				title: item.name,
				image: item.icon
			}]

			this.tid = item.id;
			getLattice({
				tid: this.tid,
				page: this.page,
				limit: this.limit
			}).then(this.getLattice);
		},
		methods: {
			changetype(index) {
				this.current = index;
				this.status = 'loadmore';
				this.page = 1;
				this.releases = [];
				if (this.current == 0) {
					getLattice({
						tid: this.tid,
						page: this.page,
						limit: this.limit
					}).then(this.getLattice);
				} else {
					getShareLatticeGoods({
						tid: this.tid,
						page: this.page,
						limit: this.limit
					}).then(this.getLattice);
				}
			},
			getLattice(e) {
				if (e.code == 200) {
					this.showEmpty = false;
					let list = e.result;
					list.forEach((item) => {
						this.releases.push(item);
					})
				} else {
					this.status = 'nomore';
					if (this.releases.length == 0) {
						this.showEmpty = true;
					}
				}
			},
			moreDynamic() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.page1 = ++this.page;
				getLattice({
					tid: this.tid,
					sort: this.current,
					page: this.page,
					limit: this.limit
				}).then(this.getLattice);
			},
			trigger(e) {
				if (e.index == 0) {
					this.$u.route({
						url: "/pagesShare/lattice/release",
						params: {}
					})
				} else if (e.index == 1) {
					this.$u.route({
						url: "/pages/index/index",
						params: {}
					})
				} else if (e.index == 2) {
					this.$u.route({
						url: "/pagesCommunity/mine/release",
						params: {}
					})
				}
			},
			fabClick() {
				// console.log(1);
			},
			like(id, index) {
				likeDynamic({
					gid: id
				}).then(res => {
					if (res.code == 200) {
						this.releases[index].like += 1;
						this.$refs.uToast.show({

							type: 'success',
							title: '成功',
							message: res.msg
						})
					} else {
						this.$refs.uToast.show({

							type: 'error',
							title: '失败',
							message: res.msg
						})
					}
				});
			},
			call(contact) {
				uni.makePhoneCall({
					phoneNumber: contact //仅为示例
				});
			},
			intoComment(item) {
				this.$u.route({
					url: '/pagesShare/lattice/comment',
					params: {
						id: item.id
					}
				});
			},
			copy(contact) {
				var that=this;
				uni.setClipboardData({
					data: contact,
					success: function() {
						that.$refs.uToast.show({
			
							type: 'success',
							title: '成功',
							message: '复制成功'
						})
					}
				});
			},
			goodDetail(id){
				this.$u.route({
					url: '/pagesShare/lattice/goods-detail',
					params: {
						gid: id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.main-service{
		background-color:transparent;
		box-shadow:none;
		padding:20rpx;
		margin-top:0;
	}
	.main-service .title{
		padding-left:0;
		background-position: 4% 100%;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/53079139ae5b67d1270fc35fefba8d1e.png');
		background-size: 70px;
		background-repeat: no-repeat;
	}
	.album {
		@include flex;
		padding: 20rpx;
		margin-top: 1px;
		align-items: flex-start;
		background-color: #FFFFFF;
		border-radius: 10rpx;


		&__avatar {
			padding: 5rpx;
			border-radius: 3rpx;
		}

		&__content {
			margin-left: 20rpx;
			flex: 1;
		}
	}
</style>
